<script setup lang="ts">
import { useRouter } from "vue-router";
import TeamCardList from "@/components/TeamCardList.vue";
import { onMounted, ref } from "vue";
import { queryTeam } from "@/services/teamService";
import { showToast } from "vant";

const router = useRouter();
const doAddTeam = () => {
  router.push("/team/add");
};
//队伍列表
let teamList = ref([]);
onMounted(async () => {
  //请求队伍数据
  const res = await queryTeam({});
  const { message, description, code, data } = res;
  if (code === 0) {
    showToast("请求成功");
    teamList.value = data;
  } else {
    showToast(description.length ? description : message);
  }
});
//搜索关键词
let keyWord = ref("");
//搜索
const onSearch = async (keyWord) => {
  //请求队伍数据
  const res = await queryTeam({ searchText: keyWord });
  const { message, description, code, data } = res;
  if (code === 0) {
    showToast("搜索成功");
    teamList.value = data;
  } else {
    showToast(description.length ? description : message);
  }
};
</script>

<template>
  <van-search
    v-model="keyWord"
    placeholder="请输入搜索关键词"
    @search="onSearch"
  />
  <team-card-list :team-list="teamList"></team-card-list>
  <van-floating-bubble
    @click="doAddTeam"
    axis="lock"
    :offset="{ x: 280, y: 470 }"
    style="--van-floating-bubble-size: 30px"
  >
    <template #default>
      <van-icon name="add" size="30" />
    </template>
  </van-floating-bubble>
</template>

<style scoped></style>
